<template>
  <div class="app-container">

    <header>
      <nav @click="templateChange(item.label)" class="cuspointer"
        :class="{ 'is-active': item.label == fd.TemplateType }" v-for="item in navList" :key="item.label">{{ item.name
        }}
      </nav>
      <div class="underline" :style="underlineStyle"></div>
    </header>

    <body>
      <header>
        <el-button v-if="!isUpdata" type="primary" style="margin-right: 10px;" @click="feeUpdata(true)">费用修改</el-button>
        <el-button v-else type="danger" style="margin-right: 10px;" @click="feeUpdata(false)">取消修改</el-button>
        <el-select filterable v-model="fd.CategoryID" placeholder="选择产品类别" @change="categoryChange">
          <el-option v-for="item in fdEnums.Category" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select filterable v-model="fd.ProductID" placeholder="选择产品类型" @change="productChange">
          <el-option v-for="item in fdEnums.Product" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select filterable v-model="fd.ProductTypeID" placeholder="选择产品名称" @change="productTypeChange">
          <el-option v-for="item in fdEnums.ProductType" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-select filterable v-model="fd.ProductSpecID" placeholder="选择产品型号" @change="productSepcChange">
          <el-option v-for="item in fdEnums.ProductSpec" :key="item.name" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" v-if="!isUpdata" style="margin-left: 10px;"
          :disabled="!Boolean(fd.ProductSpecID) && fd.TemplateType != 'AdditionFeeType'" @click="submit">搜索</el-button>
        <el-button type="" v-if="!isUpdata" @click="reset" v-show="fd.TemplateType != 'AdditionFeeType'">重置</el-button>
        <el-button type="primary" @click="feeTempUpdata" v-if="isUpdata">确认添加</el-button>
      </header>

      <div class="breadcrumbBox">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item v-for="item in breadcrumb" :key="item">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <feetable ref="feetableRef" :isUpdata.sync="isUpdata" :data="tablaData" @conBatChange="conBatChange" />
    </body>
  </div>

</template>

<script>
import feetable from './feetable.vue';
import { getCategoryTree, getProductSpec, updata, query } from '@/api/system/feetemplate'
export default {
  components: { feetable },
  data() {
    return {
      isUpdata: false,
      tablaData: [],
      breadcrumb: ['类别', '类型', '名称', '型号'],
      navList: [
        { name: '维修费用模板', label: 'RepairFeeType' },
        { name: '安装费用模板', label: 'InstallFeeType' },
        { name: '拆装费用模板', label: 'DestuffFeeType' },
        { name: '附加费用模板', label: 'AdditionFeeType' },
      ],
      fd: {
        TemplateType: 'RepairFeeType',
        CategoryID: '',
        ProductID: '',
        ProductTypeID: '',
        ProductSpecID: '',
      },
      subFd: {},
      fdEnums: {
        Category: [],
        Product: [],
        ProductType: [],
        ProductSpec: [],
      },
      underlineStyle: {
        width: '0px',
        left: '0px',
      },
    }
  },
  methods: {
    conBatChange() {
      if (this.tablaData.length > 0) {
        const firstContent = this.tablaData[0].content; // 获取第一项的 content

        this.tablaData.forEach((element, index) => {
          if (index !== 0) { // 排除第一项
            element.content = firstContent; // 将第一项的 content 赋值给其他项
          }
        });
      }
    },
    templateChange(temp) {
      if (this.fd.TemplateType === temp) return;
      this.fd.TemplateType = temp;
      // 改变后的操作
      this.$nextTick(() => {
        this.updateUnderline();
        if (temp == 'AdditionFeeType') {
          this.submit()
          return;
        }
        if (this.fd.ProductSpecID) {
          this.submit()
        } else {
          this.tablaData = []
        }
      })

    },
    updateUnderline() {
      const activeNav = this.$el.querySelector('header .is-active');
      if (activeNav) {
        const { offsetWidth, offsetLeft } = activeNav;
        this.underlineStyle.width = `${offsetWidth}px`;
        this.underlineStyle.left = `${offsetLeft}px`;
      }
    },
    getCategory() {
      getCategoryTree().then((res) => {
        this.fdEnums.Category = res.data;
      })
    },
    categoryChange(val) {
      const dataItem = this.fdEnums.Category.find(i => i.id == val)
      // this.breadcrumb = [dataItem.name, '类型', '名称', '型号']
      this.fdEnums.Product = dataItem.children
      this.fd.ProductID = ''
      this.fd.ProductTypeID = ''
      this.fd.ProductSpecID = ''
      this.fdEnums.ProductType = []
      this.fdEnums.ProductSpec = []
    },
    productChange(val) {
      const dataItem = this.fdEnums.Product.find(i => i.id == val)
      // this.breadcrumb = [this.breadcrumb[0], dataItem.name, '名称', '型号']
      this.fdEnums.ProductType = dataItem.children
      this.fd.ProductTypeID = ''
      this.fd.ProductSpecID = ''
      this.fdEnums.ProductSpec = []
    },
    productTypeChange(val) {
      // const dataItem = this.fdEnums.ProductType.find(i => i.id == val)
      // this.breadcrumb = [this.breadcrumb[0], this.breadcrumb[1], dataItem.name, '型号']
      getProductSpec({ pid: val }).then((res) => {
        this.fdEnums.ProductSpec = res.data
      })
      this.fd.ProductSpecID = ''
    },
    productSepcChange(val) { },
    /**查询 */
    submit() {
      this.subFd = this.fd;

      if (this.fd.TemplateType == 'AdditionFeeType') {
        query({
          TemplateType: 'AdditionFeeType',
          CategoryID: 0,
          ProductID: 0,
          ProductTypeID: 0,
          ProductSpecID: 0,
        }).then((res) => { this.tablaData = res.data })
        return
      } else {
        query(this.fd).then((res) => { this.tablaData = res.data })
      }

      const dataItem_lev1 = this.fdEnums.Category.find(i => i.id == this.subFd.CategoryID).name
      const dataItem_lev2 = this.fdEnums.Product.find(i => i.id == this.subFd.ProductID).name
      const dataItem_lev3 = this.fdEnums.ProductType.find(i => i.id == this.subFd.ProductTypeID).name
      const dataItem_lev4 = this.fdEnums.ProductSpec.find(i => i.id == this.subFd.ProductSpecID).name
      this.breadcrumb = [dataItem_lev1, dataItem_lev2, dataItem_lev3, dataItem_lev4]
    },
    reset() {
      this.fd.CategoryID = ''
      this.fd.ProductID = ''
      this.fd.ProductTypeID = ''
      this.fd.ProductSpecID = ''
      this.fdEnums.Product = []
      this.fdEnums.ProductType = []
      this.fdEnums.ProductSpec = []
      this.tablaData = []
      this.breadcrumb = ['类别', '类型', '名称', '型号']
    },
    feeUpdata(flag) {
      this.isUpdata = flag;
      if (!flag) {
        var newFd = JSON.parse(JSON.stringify({ ...this.subFd }))
        if (this.fd.TemplateType == 'AdditionFeeType') {
          newFd.CategoryID = 0
          newFd.ProductID = 0
          newFd.ProductTypeID = 0
          newFd.ProductSpecID = 0
        } else if (this.subFd.ProductSpec) {
          query(newFd).then((res) => { this.tablaData = res.data })
        }

      }
    },
    isFeetableRefUpdata() {
      this.$nextTick(() => {
        return this.$refs.feetableRef && !(this.$refs.feetableRef.isUpdata);
      })
    },
    feeTempUpdata() {
      var newFd = JSON.parse(JSON.stringify({ ...this.subFd }))
      if (this.fd.TemplateType == 'AdditionFeeType') {
        newFd.CategoryID = 0
        newFd.ProductID = 0
        newFd.ProductTypeID = 0
        newFd.ProductSpecID = 0
      }
      if (this.tablaData.length == 0) {
        this.$message({
          type: 'error',
          message: '暂无可提交需要修改的数据'
        });
        return
      }
      var fd = {
        ...newFd,
        Items: this.tablaData.map(i => { return { id: i.id, feeTypeID: i.feeTypeID, content: i.content, factoryAmount: i.factoryAmount, masterAmount: i.masterAmount } })
      }
      this.$confirm('此操作将对数据继续变更, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const formRule = fd.Items.some(i => !i.content)
        if (formRule) {
          this.$message({
            type: 'error',
            message: '存在没有填写的选项'
          });

        } else {
          updata(fd).then(() => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.isUpdata = false;
          })
        }
      }).catch(() => { });
    }
  },
  computed: {},
  created() { this.getCategory() },
  mounted() {
    this.updateUnderline(); // 初始化下划线样式
  },
}
</script>

<style lang="scss" scoped>
.app-container {

  &>body {
    margin-top: 20px;
    font-size: 16px;

    .breadcrumbBox {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #dfe6ec;
      border-bottom: none;

      .el-breadcrumb {
        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            color: var(--color-primary);
          }
        }
      }
    }
  }

  &>header {
    display: flex;
    gap: 20px;
    position: relative;
    font-size: 15px;

    .underline {
      position: absolute;
      bottom: 0;
      height: 4px;
      background-color: var(--color-primary);
      transition: left 0.3s ease, width 0.3s ease;
    }

    nav {
      &.cuspointer {
        cursor: pointer;

      }

      &:hover {
        color: var(--color-primary-3);
      }

      &.is-active {
        font-weight: bold;
        color: var(--color-primary);
      }

      padding: 10px 0;
    }
  }
}
</style>